<template>
    <div>
      <!--轮播图 -->
      <div class="swiper-box">
        <img
          class="swiper-bg"
          :src="films[currentIndex] && films[currentIndex].poster"
        />
        <div class="swiper" id="photoSwiper">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(film, index) in films"
              :key="film.filmId"
              :class="{ isActive: index === currentIndex }"
            >
              <div class="swiper-img"><img :src="film.poster" /></div>
            </div>
          </div>
        </div>
        <div class="triangle"></div>
      </div>
      <div class="film-info">
        <div class="film-head">
          <span class="film-name">{{ films[currentIndex].name }} </span>
          <span class="film-score">{{ films[currentIndex].grade }}</span>
          <span class="film-score-unit">分</span>
        </div>
        <div class="van-ellipsis film-desc">
          {{ showText(films[currentIndex]) }}
        </div>
        <van-icon name="arrow" class="icon" @click="toFilmDetail()" />
      </div>
    </div>
  </template>
  
  <script>
  import Swiper from "swiper";
  import "swiper/swiper.css";
  
  export default {
    props: {
      films: {
        type: Array,
        default: () => [],
      },
      filmIndex: {
        type: Number,
        default: 0,
      },
    },
    data() {
      return {
        currentIndex: 0,
      };
    },
    created() {
      this.currentIndex = this.filmIndex;
    },
    mounted() {
      this.newSwiper();
    },
    computed: {
      filmId() {
        return this.films[this.currentIndex].filmId;
      },
    },
    methods: {
      // 展示文本
      showText(film) {
        let arr = [
          film.category,
          film.runtime,
          film.director,
          film.actors.map((item) => item.name).join(","),
        ];
        return arr.join("|");
      },
      // 创建swiper 轮播
      newSwiper() {
        new Swiper("#photoSwiper", {
          initialSlide: this.currentIndex, // 设定初始化时slide的索引
          slidesPerView: 4.5, // 页面内显示几个slide
          spaceBetween: 30, // 左右留的空间 px
          centeredSlides: true, // 居中
          slideToClickedSlide: true, // 设置可点击
          on: {
            // 监听方法
            slideChangeTransitionStart: (sw) => {
              this.currentIndex = sw.activeIndex;
              // 子传父
              this.$emit("changeFilm", this.currentIndex);
              // 更新url
              this.toReplace();
            },
          },
        });
      },
      toReplace() {
        let cinemaId = this.$route.params.cinemaId;
        let showDate = this.$route.params.showDate || " ";
        this.$router.replace(
          `/cinema/${cinemaId}/film/${this.filmId}/${showDate}`
        );
      },
      toFilmDetail() {
        // 跳转到电影详情页
        this.$router.push(`/film/${this.filmId}`);
      },
    },
  };
  </script>
  
  
  <style lang="less">
  // less 使用
  @bgColor: #fff;
  @textColor: #ffb232;
  .isActive {
    zoom: 1.2;
  }
  .swiper-wrapper {
    align-items: baseline;
  }
  .swiper-box {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    overflow: hidden;
  }
  .swiper-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: blur(30px);
  }
  
  .swiper-box img {
    height: 130px;
  }
  .swiper-img img {
    width: 72px;
    height: 104px;
  }
  
  .triangle {
    position: absolute;
    bottom: -1px;
    left: calc(50% - 10px);
    width: 0px;
    height: 0px;
    border: 13px solid #0000;
    border-bottom-color: #fff;
    z-index: 99;
  }
  .film-info {
    width: 100%;
    background: #fff;
    height: 80px;
    padding: 15px 0;
    position: relative;
    // div {
    //   width: 70%;
    //   margin: 0 auto;
    // }
    .film-head {
      margin-bottom: 10px;
      text-align: center;
      line-height: 18px;
    }
    .film-name {
      font-size: 15px;
      color: #191a1b;
      padding-right: 5px;
    }
    .film-score {
      font-size: 16px;
      font-style: italic;
      color: @textColor;
    }
    .film-score-unit {
      font-size: 10px;
      color: @textColor;
    }
    .film-desc {
      text-align: center;
      height: 18px;
      color: #797d82;
      font-size: 13px;
      padding: 0 12%;
    }
    .icon {
      position: absolute;
      right: 15px;
      top: 0;
      margin-top: 36px;
    }
  }
  </style>